import React, { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { NavBar, Card, Button, Modal, Input, Popup } from "antd-mobile";
import { Cell, Dialog, ConfigProvider } from "@nutui/nutui-react";
import { ArrowRight } from "@nutui/icons-react";
import axios from "axios";
import "./Ziliao.css";
import { Uploader,Toast } from 'react-vant';

export default function Ziliao() {
  const navigate = useNavigate();
  let [user, setUser] = useState({});
  const [visible1, setVisible1] = useState(false);
  let [username, setUsername] = useState("");


  const [visible, setVisible] = useState(false);
  const [visible2, setVisible2] = useState(false);
  const [img, setImg] = useState("");

  let getuser = async () => {
    let res = await axios.post("/linmr/user", {
      id: localStorage.getItem("userId"),
    });
    setUser(res.data.data);
    setUsername(res.data.data.name);
  };
  useEffect(() => {
    getuser();
  }, []);

  //图片上传
  const upload = async (file) => {
    if (file.length > 0) {
      const formData = new FormData();
      formData.append("file", file[0].file);
      await axios.post(`http://127.0.0.1:3000/linmr/upload1?id=${localStorage.getItem("userId")}`, formData).then((res) => {
        
        Toast.success("上传成功");
        getuser();
      });
    }
  };
  return (
    <div style={{ backgroundColor: "rgb(244, 248, 255)", height: "100vh" }}>
      {console.log(user)
      }
      <div className="pj">
        <NavBar
          onBack={() => {
            navigate(-1);
          }}
        >
          账号资料
        </NavBar>
      </div>
      <img
        className="tx"
        src={user.img}
        alt=""
        onClick={() => {
          setVisible2(true);
        }}
      />
      <div className="ziliao">
        <Cell.Group divider={false}>
          <Cell title="账号" extra={user.phone} />
          <Cell
            title="昵称"
            extra={user.name}
            onClick={() => setVisible1(true)}
          />
          <Cell title="性别" extra={user.sex} />
          <Cell title="年龄" extra={user.age} />
        </Cell.Group>
        <ConfigProvider
          theme={{
            "--nutui-dialog-close-color": "#000",
          }}
        >
          <Dialog
            overlay
            visible={visible1}
            onConfirm={async () => {
              let res = await axios.post("/linmr/change", {
                _id: localStorage.getItem("userId"),
                name: username,
              });
              if (res.data.code == 200) {
                getuser();
                setVisible1(false);
              }
            }}
            onCancel={() => setVisible1(false)}
          >
            <Input
              type="text"
              placeholdkler="请输入昵称"
              value={username}
              onChange={(val) => {
                setUsername(val);
              }}
            />
            <p>(2-20字符)</p>
          </Dialog>
        </ConfigProvider>
      </div>
      <div>
        <Popup
          visible={visible2}
          onMaskClick={() => {
            setVisible2(false);
          }}
          onClose={() => {
            setVisible2(false);
          }}
          bodyStyle={{ height: "40vh" }}
        >
          {
            <div className="photo">
              <p onClick={() => navigate("/px")}>拍摄照片</p>
              <Uploader
                maxCount={1}
                previewImage={false}
                action="http://127.0.0.1:3000/linmr/upload1"
                onChange={(e) => upload(e)}
                previewCoverRender={(item)=>{return <dov style={{width:"20px",height:'20px',zIndex:'999'}}></dov>}}
                children={<div>上传头像</div>}
              ></Uploader>
            </div>
          }
        </Popup>
      </div>
    </div>
  );
}
